<template>
  <div class="order-wrap">
   <div v-title style="display: none">信息确认</div>
   <div class="class-info" >
      <headline headline="班级信息"></headline>
      <ul class="ul-order">
        <li>
          <div class='SpaceBetweenDiv'>
            <span>班别</span>
            <span class="span-grey">{{ classType }}</span>
          </div>
        </li>
        <li>
          <div class='SpaceBetweenDiv'>
            <span>车型</span>
            <span class="span-grey">{{ carType }}</span>
          </div>
        </li>
        <li>
          <div class='SpaceBetweenDiv'>
            <span>单价</span>
            <span class="span-red"><span class="span-red">￥</span>{{ price + '.00'}}</span>
          </div>
        </li>
      </ul>
    </div>

     <div class="personel-info">
      <headline headline="个人信息"></headline>
      <ul class="ul-order">
        <li>
          <div class='PersonDiv'>
            <div>
              <span class="span-title">真实姓名</span>
              <input class="input-name" type="text" v-model="name" placeholder="以身份证上姓名为准"/>
            </div>
              <span v-show="name" class="span-tick"></span>
          </div>
        </li>
        <li>
          <div class='PersonDiv'>
            <div>
              <span class="span-title" >证件号码</span>
              <input class="input-name" type="text" v-model="number" placeholder="填写身份证号"/>
            </div>
              <span v-show="numtick" class="span-tick"></span>
          </div>
        </li>
        <li>
          <div class='PersonDiv' v-if="login">
            <div>
              <span class="span-title">手机号码</span>
              <span class="input-phone" type="text" v-model="phone">{{ this.phone }}</span>
            </div>
          </div>
          <div class='PersonDiv' v-else>
            <div>
              <span class="span-title">手机号码</span>
              <input class="input-phone" type="text" v-model="phone" placeholder="填写手机号码"/>
            </div>
            <div>
              <span v-show="phonetick" class="span-tick-phone"></span>
              <a class="able" v-show="able" @click="getVerify">获取验证码</a>
              <span class="disable" v-show="disable">获取验证码</span>
              <span class="disable" v-show="sent">已发送(<span>{{ time }}</span>)</span>
            </div>
          </div>  
        </li>
        <li v-if="login == ''">
          <div class='PersonDiv'>
            <div>
              <span class="span-title">验证码</span>
              <input class="input-name" type="number" v-model="verify" placeholder="输入验证码"/>
            </div>
              <span v-show="vertick" class="span-tick"></span>
          </div>
        </li>
      </ul>
    </div>

    <div class="discount-info">
      <headline headline="优惠信息"></headline>
      <ul class="ul-order">
        <li>
          <div class="SpaceBetweenDiv">
            <span>使用优惠</span>
            <span class='span-grey'>无<a href="#">></a></span>
          </div>         
        </li>
      </ul>
    </div>

    <div class="order-footer" v-show="footer">
      <div class='money'>合计:
        <span><span>￥</span>{{ price + '.00'}}</span>
        <a href="#" @click="saveorder()">确认支付</a> 
      </div>    
    </div> 
    <notification notification="支付异常，请重新支付或联系客服。" title="提示" isWithdraw="" v-show="tip" v-on:gettooltip="showtooltip"></notification>
    <notification notification="此账号已经报名，无需重复报名。" title="提示" isWithdraw="" v-show="tip2" v-on:gettooltip="showtooltip"></notification>
  </div>
</template>

<script type="text/ecmascript-6">
  import headline from 'components/headline/headline';
  import notification from 'components/notification/notification';
  const ERR_OK = 1;
  export default {
    props: {
    },
    data() {
      return {
        classType: '',
        carType: '',
        price: '',
        able: '',
        disable: 'true',
        sent: '',
        time: '60',
        numtick: '',
        phonetick: '',
        vertick: '',
        name: '',
        number: '',
        phone: window.localStorage.cphone,
        verify: '',
        verifycode: '',
        login: '',
        footer: 'true',
        tip: '',
        tip2: ''
      };
    },
    watch: {
      name: function(newdata, olddata) {
        this.name = newdata.replace(/(^\s*)|(\s*$)/g, '');
      },
      number: function(newdata, olddata) {
        let reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
        this.numtick = reg.test(this.number);
      },
      phone: function(newdata, olddata) {
        let reg = /^1[0-9]{10}$/;
        if (reg.test(this.phone)) {
          this.phonetick = 'true';
          this.able = 'true';
          this.disable = '';
        } else {
          this.phonetick = '';
          this.able = '';
          this.disable = 'true';
        }
      },
      verify: function(newdata, olddata) {
        let verifycode = this.verifycode.toString();
        if (this.verify !== '') {
          this.vertick = (this.verify === verifycode);
        } else {
          this.vertick = '';
        }
      }
    },
    created() {
      let id = this.$route.params.id;
      this.$http.get('api/opera/course/info/?id=' + id).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          let coursedetail = response.data[0];
          this.classType = coursedetail.course_name;
          this.carType = coursedetail.course_type;
          if (this.carType === 'C1') {
            this.carType = this.carType + '手动挡';
          } else {
            this.carType = this.carType + '自动挡';
          }
          this.price = coursedetail.price;
        }
      });
      if (window.localStorage.cphone) {
        this.login = 'true';
        this.verify = 'pA5_';
        this.$http.post('api/login/userinfo/', {mobile: window.localStorage.cphone}).then(response => {
          this.number = response.body.data.idcard_num;
          this.name = response.body.data.real_name;
        });
      }
    },
    methods: {
      showtooltip(msg) {
        this.tip = msg.tooltip;
        this.tip2 = msg.tooltip;
      },
      getVerify() {
        this.countdown();
        this.$http.post('api/opera/getverify/', {phone: this.phone}).then(response => {
          response = response.body;
          this.verifycode = response.data[0].str;
          console.log(this.verifycode);
        });
      },
      saveorder() {
        this.$http.post('api/login/checkuserisstudent/', {mobile: this.phone}).then(response => {
          if (response.body.errno === 1) {
            this.tip2 = 'true';
          } else {
            this.submit();
          }
        });
      },
      submit() {
        let id = this.$route.params.id;
        this.$http.post('api/pay/getpaymentsinfo/', {product_id: id, op_id: window.localStorage.openid, mobile: this.phone, username: this.name, verify: this.verify, idcard_num: this.number}).then(response => {
            var data = response.body.data;
            function onBridgeReady() {
               window.WeixinJSBridge.invoke(
                   'getBrandWCPayRequest', {
                      'appId': data.appId,
                      'timeStamp': data.timeStamp,
                      'nonceStr': data.nonceStr,
                      'package': data.package,
                      'signType': data.signType,
                      'paySign': data.paySign
                   },
                   function(res) {
                      if (res.err_msg === 'get_brand_wcpay_request:ok') {
                      } else {
                        this.tip = 'true';
                      }
                   }
               );
            }
            if (typeof WeixinJSBridge === 'undefined') {
              window.alert('支付异常，请使用微信支付。');
               if (document.addEventListener) {
                   document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
               } else if (document.attachEvent) {
                   document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                   document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
               }
            } else {
               onBridgeReady();
            }
          });
      },
      countdown() {
        if ((this.time) > 0) {
          this.time--;
          this.sent = 'true';
          this.able = '';
          setTimeout(() => {
            this.countdown();
          }, 1000);
        } else {
          this.sent = '';
          this.able = 'true';
          this.time = 60;
        }
      }
    },
    components: {
      headline,
      notification
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $$theme
     辅助 蓝 $assist */  
  .order-wrap
    span
      font-size 15px
      color rgb(33,33,33)
      font-family PingFangSC-Regular
    .ul-order
      list-style none 
      li
        list-style none
        height 35px
        margin-right 15px
        margin-left 15px
        line-height 35px
        border-top-1px($border)
        .span-grey
          color: rgb(114,114,114)
        .span-red
          color: $theme
        .span-title
          width: 60px
          display: inline-block
        .span-tick
          circle-icon-1px($theme,14px)
          margin-top: 10px
          bg-image('cm')
        .span-tick-phone
          circle-icon-1px($theme,14px)
          bg-image('cm')
          float: left
          margin-top: 10px
          margin-right: 2px
        .SpaceBetweenDiv
          display: flex
          justify-content: space-between
          padding-left: 15px
          padding-right: 15px

  .class-info
    background-color: #fff 
    border-1px($border) 

  .personel-info
    background-color: #fff
    margin-top: 25px
    border-1px($border)
    border-top-1px($border)
    .PersonDiv
      display: flex
      justify-content: space-between
      padding-left: 15px
      padding-right: 15px
      .input-phone
        font-size 15px
        margin-left 7px
        width 92px   
      .input-name
        font-size 15px
        margin-left 7px
        width 150px    
    .able
      border-left 1px solid rgb(226, 226, 227)
      padding-left 8px
      color $theme
      font-size 13px
    .disable
      border-left 1px solid rgb(226, 226, 227)
      padding-left 8px
      color $se-fn
      font-size 13px

    input
      font-size 15px
      margin-left 13px
      -webkit-tap-highlight-color rgba(0,0,0,0)

  .discount-info
    background-color: #fff
    margin-top: 25px
    border-1px($border)
    border-top-1px($border)
    margin-bottom 55px
    a
      color: rgb(207,207,207)
      font-size 20px
      font-weight bold
      border: none
      margin-left 9px

  .order-footer
    height: 47px
    background-color: #fff
    position: fixed
    bottom: 0px
    left: 0px
    right: 0px
    .money
      line-height: 47px
      margin-left: 15px
      span
        color $theme
      a
        float right
        width 100px
        background-color $theme
        color #fff
        font-size 16px
        text-align: center

</style>
